<template>
  <div class="artical-card" @click="click">
    <div class="title">
      <strong>{{title}}</strong>
    </div>
    <van-row type="flex" justify="ceenter" align="center">
      <van-col span="2">
        <van-image :src="userimage" round width="20px" height="20px"></van-image>
      </van-col>
      <van-col span="10">
        <div class="auther">{{username}}</div>
      </van-col>
    </van-row>
    <van-row
      type="flex"
      justify="ceenter"
      align="center"
      class="card-contant"
      v-if="content_image!=''"
    >
      <van-col span="18">
        <p class="card-contant-text">{{ content_text }}</p>
      </van-col>
      <van-col span="6">
        <van-image class="card-contant-image" :src="content_image" fit="cover"></van-image>
      </van-col>
    </van-row>
    <van-row type="flex" justify="ceenter" align="center" class="card-contant" v-else>
      <p class="card-contant-text">{{ content_text }}</p>
    </van-row>
    <div class="count">{{viewcount}}浏览·{{replycount}}评论</div>
  </div>
</template>

<script>
export default {
  name: 'myArticalCard',
  props: {
    topic: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      date: this.topic.time,
      title: this.topic.topic_name,
      topic_id: this.topic.topic_id,
      username: this.topic.user,
      title: this.topic.topic_name,
      content_text: this.topic.intro,
      content_image: this.topic.image,
      viewcount: this.topic.viewcount,
      replycount: this.topic.commentcount,
      nickname: '匿名者',
      userimage:
        'https://tse1-mm.cn.bing.net/th/id/OIP.WP5k6Zm8aoF0pqLFQ7FcPwHaO0?pid=Api&rs=1'
    }
  },
  mounted() {
    this.$http
      .get('/account/userimage', { params: { user: this.username } })
      .then(res => {
        if (res.data.status === 200) {
          this.nickname = res.data.nickname
          this.userimage = res.data.userimage
        }
      })
      .catch(res => {})
  },
  methods: {
    click() {
      this.$router.push({ path: '/topic', query: { topic_id: this.topic.topic_id } })
    }
  },
  computed: {}
}
</script>
<style scoped>
.artical-card {
  text-align: left;
  margin: 5px 10px;
  padding: 10px 10px 10px 20px;
  border-radius: 20px;
  background-color: #fff;
}
.title {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 15px;
}
.card-contant {
  height: 60px;
}
p {
  width: 93%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.card-contant-image {
  width: 90%;
  height: 80px;
}
.count {
  color: gray;
}
.auther {
  color: gray;
}
</style>
